<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="/elementui/index.css">

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>
</head>
<body>
<div id="app">

    <el-button type="primary" @click="dialogFormVisible1 = true">移库操作</el-button>


    <el-table
            :data="moveware"
            border
            :row-class-name="tableRowClassName"
            style="width: 100%">

        <el-table-column
                label="序号">
            <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column
                label="移库单号">
            <template slot-scope="scope">{{ scope.row.mvNo }}</template>
        </el-table-column>
        <el-table-column
                label="移出仓库">
            <template slot-scope="scope">{{ scope.row.mvOut }}</template>
        </el-table-column>
        <el-table-column
                label="移入仓库">
            <template slot-scope="scope">{{ scope.row.mvIn }}</template>
        </el-table-column>
        <el-table-column
                label="转移商品">
            <template slot-scope="scope">{{ scope.row.mvGoods }}</template>
        </el-table-column>
        <el-table-column
                label="转移数量">
            <template slot-scope="scope">{{ scope.row.mvNumber }}</template>
        </el-table-column>
        <el-table-column
                label="移库原因">
            <template slot-scope="scope">{{ scope.row.mvMark }}</template>
        </el-table-column>
        <el-table-column
                label="移库负责人">
            <template slot-scope="scope">{{ scope.row.mvPerson }}</template>
        </el-table-column>
        <el-table-column
                label="联系电话">
            <template slot-scope="scope">{{ scope.row.mvTel }}</template>
        </el-table-column>

        <el-table-column
                label="移库时间">
            <template slot-scope="scope">{{ scope.row.mvTime }}</template>
        </el-table-column>

        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button icon="el-icon-search" circle @click="selectiomWare(scope)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="移库弹窗" :visible.sync="dialogFormVisible1" @close="closeMyDialog1">
        <el-form :model="Imoveware">
            <el-form-item label="移出库名" :label-width="formLabelWidth">
                <el-select v-model="Imoveware.outwareName" placeholder="请选择仓库名">
                    <el-option
                            v-for="item in warehouseNameAll"
                            :key="item.value"
                            :label="item.wareName"

                            :value="item.wareName">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="转移商品名称" :label-width="formLabelWidth">
                <el-input v-model="Imoveware.mvGoods" autocomplete="off" @blur="toShowProduct"></el-input>


            </el-form-item>

            <el-table
                    :data="proDetails"
                    border
                    :row-class-name="tableRowClassName"
                    style="width: 100%">

                <el-table-column
                        label="序号">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column
                        label="产品码">
                    <template slot-scope="scope">{{ scope.row.pnumber }}</template>
                </el-table-column>
                <el-table-column
                        label="商品名称">
                    <template slot-scope="scope">{{ scope.row.pname }}</template>
                </el-table-column>
                <el-table-column
                        label="仓库名称">
                    <template slot-scope="scope">{{ scope.row.wareName }}</template>
                </el-table-column>

                <el-table-column
                        label="货区名称">
                    <template slot-scope="scope">{{ scope.row.goodName }}</template>
                </el-table-column>
                <el-table-column
                        label="货架编号">
                    <template slot-scope="scope">{{ scope.row.shelvesNo }}</template>
                </el-table-column>
                <el-table-column
                        label="货位编号">
                    <template slot-scope="scope">{{ scope.row.cargoNo }}</template>
                </el-table-column>


            </el-table>

            <!---------------------2-->

            <el-form-item label="移入库名" :label-width="formLabelWidth">
                <el-select v-model="Imoveware.mvIn" placeholder="请选择仓库名" @change="showInWare">
                    <el-option

                            v-for="item in warehouseNameAll"
                            :key="item.value"
                            :label="item.wareName"
                            :value="item.wareName">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-table
                    :data="proDetails2"
                    border
                    :row-class-name="tableRowClassName"
                    :key="Math.random()"
                    style="width: 100%">

                <el-table-column
                        label="序号">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column
                        label="产品码">
                    <template slot-scope="scope">{{ scope.row.pnumber }}</template>
                </el-table-column>
                <el-table-column
                        label="商品名称">
                    <template slot-scope="scope">{{ scope.row.pname }}</template>
                </el-table-column>
                <el-table-column
                        label="仓库名称">
                    <template slot-scope="scope">{{ scope.row.wareName }}</template>
                </el-table-column>


                <el-table-column
                        label="货区名称">
                    <template slot-scope="scope">
                        <el-select v-model="goodNameAlls[scope.$index].goodsName" placeholder="请选择货区"
                                   @change="showgoodName(scope.$index)">
                            <el-option

                                    v-for="item in goodNameAll"
                                    :key="item"
                                    :label="item"
                                    :value="item">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>


                <el-table-column
                        label="货架编号">
                    <template slot-scope="scope">
                        <el-select v-model="goodNameAlls[scope.$index].shelvesNo" placeholder="请选择货架"
                                   @change="showshelvesNo(scope.$index)">
                            <el-option

                                    v-for="item in shelvesNoAll"
                                    :key="item.shelvesNo"
                                    :label="item.shelvesNo"
                                    :value="item.shelvesNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>


                <el-table-column
                        label="货位编号">
                    <template slot-scope="scope">
                        <el-select v-model="goodNameAlls[scope.$index].cargoNo" placeholder="请选择货位">
                            <el-option

                                    v-for="item in cargoNoAll"
                                    :key="item.value"
                                    :label="item.cargoNo"
                                    :value="item.cargoNo">
                            </el-option>
                        </el-select>
                    </template>
                </el-table-column>

            </el-table>

            <el-form-item label="负责人" :label-width="formLabelWidth">
                <el-input v-model="Admin.mvPerson" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="Admin.mvTel" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="转移数量" :label-width="formLabelWidth">
                <el-input v-model="Admin.mvNumber" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="出库时间" :label-width="formLabelWidth">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" v-model="Admin.mvTime"
                                    value-format="yyyy-MM-dd"


                                    style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>

            <el-form-item label="移库原因" :label-width="formLabelWidth">
                <el-input v-model="Admin.mvMark" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="updatemoveware">提 交</el-button>
        </div>
    </el-dialog>

    <el-dialog title="展示流水" :visible.sync="dialogFormVisible2" @close="closeMyDialog2">

        移出库名：<p>{{PerSon.mvOut}}</p>
        转移商品名称: <p>{{PerSon.mvGoods}}</p>

        <el-table
                ref="outmovewareTable"
                :data="outware"

                style="width: 100%">

            <el-table-column
                    label="序号">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                    label="产品码">
                <template slot-scope="scope">{{ scope.row.iomGoodsno }}</template>
            </el-table-column>
            <el-table-column
                    label="商品名称">
                <template slot-scope="scope">{{ scope.row.iomGoods }}</template>
            </el-table-column>
            <el-table-column
                    label="入库库名">
                <template slot-scope="scope">{{ scope.row.iomName }}</template>
            </el-table-column>
            <el-table-column
                    label="入库区域">
                <template slot-scope="scope">{{ scope.row.iomArea }}</template>
            </el-table-column>
            <el-table-column
                    label="入库库架">
                <template slot-scope="scope">{{ scope.row.iomShelves }}</template>
            </el-table-column>
            <el-table-column
                    label="入库货位">
                <template slot-scope="scope">{{ scope.row.iomCargoloca }}</template>
            </el-table-column>

        </el-table>

        <br>
        移入库名: <p>{{PerSon.mvIn}}</p>
        <br>

        <el-table
                ref="inmovewareTable"
                :data="inware"

                style="width: 100%">

            <el-table-column
                    label="序号">
                <template slot-scope="scope">{{ scope.row.id }}</template>
            </el-table-column>
            <el-table-column
                    label="产品码">
                <template slot-scope="scope">{{ scope.row.iomGoodsno }}</template>
            </el-table-column>
            <el-table-column
                    label="商品名称">
                <template slot-scope="scope">{{ scope.row.iomGoods }}</template>
            </el-table-column>
            <el-table-column
                    label="入库库名">
                <template slot-scope="scope">{{ scope.row.iomName }}</template>
            </el-table-column>
            <el-table-column
                    label="入库区域">
                <template slot-scope="scope">{{ scope.row.iomArea }}</template>
            </el-table-column>
            <el-table-column
                    label="入库库架">
                <template slot-scope="scope">{{ scope.row.iomShelves }}</template>
            </el-table-column>
            <el-table-column
                    label="入库货位">
                <template slot-scope="scope">{{ scope.row.iomCargoloca }}</template>
            </el-table-column>

        </el-table>

        负责人:<p>{{PerSon.mvIn}}</p>
        联系电话：<p>{{PerSon.mvTel}}</p>
        移库时间:<p>{{PerSon.mvTime}}</p>
        转移数量:<p>{{PerSon.mvNumber}}</p>
        移库原因:<p>{{PerSon.mvMark}}</p>
    </el-dialog>


</div>
<script src="/vue/vue.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script src="/elementui/index.js"></script>

<script>
    new Vue({
        el: "#app",
        data() {

            return {
                PerSon: {
                    companyId: '',
                    id: '',
                    mvGoods: '',
                    mvIn: '',
                    mvMark: '',
                    mvNo: '',
                    mvNumber: '',
                    mvOut: '',
                    mvPerson: '',
                    mvTel: '',
                    mvTime: ''


                },
                outware: null,
                inware: null,
                Imoveware: {
                    id: '',
                    outwareName: '',
                    mvGoods: '',
                    mvIn: '',

                },
                Admin: {
                    mvPerson: '',
                    mvTel: '',
                    mvNumber: '',
                    mvTime: '',
                    mvMark: ''
                },

                Good: null,
                goodNameAlls: [{

                    goodsName: '',
                    shelvesNo: '',
                    cargoNo: ''
                }],
                id: null,
                proDetails: null,
                proDetails2: null,
                goodNameAll: null,
                shelvesNoAll: null,
                cargoNoAll: null,
                warehouseNameAll: null,
                dialogFormVisible1: false,
                dialogFormVisible2: false,
                formLabelWidth: '120px',
                moveware: null,
                total: 0,   //总条数
                current: 0, //当前页数
                pageSize: 0,//每页条数

            }
        },
        methods: {

            closeMyDialog1() {

            },

            closeMyDialog2() {
                this.Admin.mvMark = ''
                this.AdminmvPerson = ''
                this.AdminmvTel = ''
                this.AdminmvNumber = ''
                this.AdminmvTime = ''


            },

            selectiomWare(scope) {
                this.dialogFormVisible2 = true;

                axios.get("/selectWare/" + scope.row.mvNo).then(value => {
                    if (value.data.state == 1) {

                        this.inware = value.data.data[0];
                        this.outware = value.data.data[1];
                        this.PerSon = value.data.data[2];
                    }
                })
            },

            updatemoveware() {
                for (let i = 0; i < this.proDetails2.length; i++) {
                    this.proDetails2[i].goodName = this.goodNameAlls[i].goodsName
                    this.proDetails2[i].shelvesNo = this.goodNameAlls[i].shelvesNo
                    this.proDetails2[i].cargoNo = this.goodNameAlls[i].cargoNo
                }


                console.log(this.proDetails)
                console.log(this.proDetails2)
                console.log(this.Admin)
                axios.post("/moveware", {
                    proDetails: this.proDetails,
                    proDetails2: this.proDetails2,
                    admin: this.Admin

                }).then(value => {
                    if (value.data.state == 1) {
                        console.log('移库成功')
                    }
                })
                this.dialogFormVisible1 = false;
            },

            showInWare() {

                this.proDetails2 = JSON.parse(JSON.stringify(this.proDetails));
                //将this.proDetail先转换成一个json格式的对象再把json格式的对象赋值给另一个就等于新创建一个对象


                for (let i = 0; i < this.proDetails2.length; i++) {
                    this.proDetails2[i].wareName = this.Imoveware.mvIn

                    axios.get("/t-goodnameAll/" + this.Imoveware.mvIn).then(value => {

                        if (value.data.state == 1) {

                            this.goodNameAll = value.data.data;

                        }
                    })
                    if (this.goodNameAlls.length <= i)
                        this.goodNameAlls.push({
                            goodsName: '',
                            shelvesNo: '',
                            cargoNo: ''
                        })
                }


            },
            showgoodName(i) {
                axios.get("/t-shelvesNo/" + this.goodNameAlls[i].goodsName).then(value => {
                    console.log(this.Imoveware.mvIn)
                    if (value.data.state == 1) {
                        this.shelvesNoAll = value.data.data;
                        console.log(this.shelvesNoAll)
                    }
                })
            },
            showshelvesNo(i) {
                axios.get("/t-Tca/" + this.goodNameAlls[i].shelvesNo).then(value => {
                    console.log(this.goodNameAlls[i].shelvesNo)
                    if (value.data.state == 1) {
                        this.cargoNoAll = value.data.data;
                        console.log(this.cargoNoAll)
                    }
                })
            },


            toShowProduct() {
                console.log(this.Imoveware.outwareName)
                axios.get("/proDetails/" + this.Imoveware.outwareName + "/" + this.Imoveware.mvGoods).then(value => {
                        if (value.data.state == 1) {
                            console.log("进来了")
                            this.proDetails = value.data.data;
                        }
                    },
                );
            },

            //当前页跳转的方法
            loadPage(current) {
                this.current = current;

                axios.get("/moveware?current=" + current).then(value => {
                        if (value.data.state == 1) {
                            console.log("进来了")
                            this.moveware = value.data.data.records;
                            this.total = value.data.data.total;
                            this.pageSize = value.data.data.size;
                            this.current = value.data.data.current;
                        }
                    },
                );

            },
            tableRowClassName({row, rowIndex}) {
                row.index = rowIndex;
                this.moveware[rowIndex].id = rowIndex + 1;
                if (this.proDetails != null) {
                    this.proDetails[rowIndex].id = rowIndex + 1;
                }
                if (rowIndex % 2 === 0) {
                    return 'warning-row';
                } else if (rowIndex % 2 === 1) {
                    return 'success-row';
                }
                return '';
            }
        },


        mounted() {
            this.loadPage(1)


            axios.get("/list/t-ware").then(value => {//查询所有仓库名称
                if (value.data.state == 1) {
                    this.warehouseNameAll = value.data.data;
                    console.log(this.warehouseNameAll)
                }
            })

        }
    })


</script>
</body>
